<template>
  <aside class="sidebar">
    <nav class="sidebar-nav">
      <div v-for="item in chartMenus" :key="item.path" class="sidebar-nav-item" :class="{ 'sidebar-nav-item--active': selectedType === item.value }" @click="handleSelect(item)">
        <div class="sidebar-nav-icon-wrapper">
          <i class="sidebar-nav-icon" :class="item.icon"></i>
        </div>
        <span class="sidebar-nav-text">{{ item.label }}</span>
      </div>
    </nav>
  </aside>
</template>

<script setup>
import { chartMenus } from '@/utils/chartTypes'
import { ref } from 'vue'

const selectedType = ref('line')
const emit = defineEmits(['update:type'])

const handleSelect = (item) => {
  selectedType.value = item.value
  emit('update:type', item.value)
}
</script>

<style scoped>
@import './index.css';
</style>
